<template>
	<div>
		<input type="text" v-model.number.lazy="a"/>
		+
		<input type="text" v-model.number.lazy="b"/>
		=
		{{ c }}
	</div>
	<div>
		<input type="text" v-model.number.lazy="a"/>
		+
		<input type="text" v-model.number.lazy="b"/>
		=
		{{ c }}
	</div>
</template>

<script setup>
import { ref,computed } from 'vue'
const a = ref(0)
const b = ref(0)
const c = computed(() => {
	console.log('计算a + b')
	// a或者b的变化会触发重新计算得到c，c的变化引起视图的变化
	// c只会在ab变化的时候计算一次，用的时候从缓存中取值
	return a.value + b.value 
})
// const sum = () => {
// 	console.log('计算a + b')
// 	return a.value + b.value 
// }
</script>

<style scoped>
	
</style>